<script setup>
    import { ref } from 'vue'
    import { useAuthStore } from '@/stores/auth'
    import '@/assets/main.css'

    // 定义 emit，用于向父组件 (AuthView) 发送事件
    const emit = defineEmits(['go-to-register'])

    const authStore = useAuthStore()

    // 定义表单数据的响应式引用
    const email = ref('')
    const password = ref('')
    const errorMessage = ref('') // 用于显示登录错误信息
    const isLoading = ref(false)

    // 处理登录逻辑
    async function handleLogin() {
        isLoading.value = true;
        errorMessage.value = '' // 清空之前的错误信息
        const success = await authStore.login({
            email: email.value,
            password: password.value
        });
        isLoading.value = false; // 结束加载
        console.log('登录信息:', { email: email.value, password: password.value })

        if (success) {
            // 登录成功后的跳转已在 store 的 action 中处理
            console.log("Login component: Login successful");
        } else {
            // 登录失败，错误信息在 store 的 loginError 中
            console.log("Login component: Login failed");
        }
    }

    // 通知父组件切换到注册视图
    function emitGoToRegister() {
        emit('go-to-register')
    }
</script>

<template>
    <form @submit.prevent="handleLogin" class="form">
        <div class="form-group">
            <label for="login-email">邮箱:</label>
            <input type="email" id="login-email" v-model="email" required :disabled="isLoading">
        </div>
        <div class="form-group">
            <label for="login-password">密码:</label>
            <input type="password" id="login-password" v-model="password" required :disabled="isLoading">
        </div>
        <!-- 显示 store 中的错误信息 -->
        <div v-if="authStore.loginError" class="error-message">{{ authStore.loginError }}</div>
        <!-- 根据加载状态显示不同按钮文本或添加 loading 图标 -->
        <button type="submit" class="submit-button" :disabled="isLoading">
            {{ isLoading ? '登录中...' : '登录' }}
        </button>
        <p class="switch-link">
            还没有账号?
            <button type="button" @click="emitGoToRegister" :disabled="isLoading">立即注册</button>
        </p>
    </form>
</template>

<style scoped>
    .form {
        display: flex;
        flex-direction: column;
        /* gap: 15px; */
        gap: 1rem; /* 16/16 */
    }
    .form-group {
        text-align: left;
    }
    .form-group label {
        display: block;
        /* margin-bottom: 5px; */
        margin-bottom: 0.3125rem; /* 5/16 */
        font-weight: bold;
        color: var(--color-text-label);
        font-size: 0.875rem; /* 14/16 */
    }
    .form-group input {
        width: 100%;
        /* padding: 10px; */
        padding: 0.625rem; /* 10/16 */
        border: 1px solid var(--color-border-input);
        border-radius: 0.25rem; /* 4/16 */
        box-sizing: border-box;
        font-size: 1rem; /* 基础输入框字体大小 */
        background-color: var(--color-input-bg);
        color: var(--color-text);
        transition: border-color 0.3s ease; /* 添加过渡效果 */
    }
    .form-group input:focus { /* 输入框获取焦点时的样式 */
        outline: none; /* 去除默认 outline */
        border-color: var(--color-primary); /* 边框变为主色 */
        box-shadow: 0 0 0 2px var(--color-primary-focus-ring); /* 添加外发光效果 */
    }
    .submit-button {
        /* padding: 12px 15px; */
        padding: 0.75rem 1rem; /* 12/16, 16/16 */
        background-color: var(--color-primary);
        color: var(--color-button-text);
        border: none;
        border-radius: 0.25rem; /* 4/16 */
        cursor: pointer;
        font-size: 1rem;
        font-weight: 500; /* 稍加粗 */
        transition: background-color 0.2s ease, opacity 0.2s ease;
    }
    .submit-button:hover:not(:disabled) {
        background-color: var(--color-primary-hover);
    }
    .submit-button:disabled {
        background-color: var(--color-button-disabled-bg);
        color: var(--color-button-disabled-text);
        cursor: not-allowed;
        opacity: 0.7;
    }
    .error-message {
        color: var(--color-error);
        font-size: 0.875rem; /* 14/16 */
        /* margin-top: -10px; */
        margin-top: -0.5rem; /* -8/16 */
        margin-bottom: 0.5rem; /* 8/16 */
        text-align: left; /* 错误信息左对齐 */
    }
    .switch-link {
        /* margin-top: 10px; */
        margin-top: 0.75rem; /* 12/16 */
        font-size: 0.875rem; /* 14/16 */
        text-align: center;
        color: var(--color-text-secondary); /* 使用次要文本色 */
    }
    .switch-link button {
        background: none;
        border: none;
        color: var(--color-link); /* 使用链接色 */
        cursor: pointer;
        text-decoration: underline;
        padding: 0;
        font-size: 1em; /* 与父元素一致 */
    }
    .switch-link button:hover {
        color: var(--color-link-hover);
    }
    .switch-link button:disabled {
        color: var(--color-text-disabled);
        cursor: not-allowed;
        text-decoration: none;
    }
</style>